<template>
    <div class="loading" v-if="!isLoading">
        <van-loading type="spinner" vertical color="#1989fa">加载中...</van-loading>
    </div>
    <div v-else>
        <div class="topBox">
            <div class="L"><a href="index.html">LOGO</a></div>
            <div class="C">
            <!-- 搜索 -->
                <div class="saerchbox" @click="router.push({path:'/product/product/index',query:{action:'homeSearch'}})">
                    <input type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
                </div>
            </div>
            <!-- 列表更多 -->
            <div class="R" ><img src="/assets/images/tr.png"></div>
        </div>
        <div class="clear"></div>
        <van-swipe :autoplay="2000" lazy-render height="211">
            <van-swipe-item v-for="item in homeInfo.recommendData" :key="item.id">
                <router-link :to="{ path: '/product/product/info', query: { 'proid': item.id } }">
                    <img v-lazy="item.avatars_cdn[0]" />
                </router-link>
            </van-swipe-item>
        </van-swipe>
        <div class="clear"></div>
        <div class="lqgwBox">
            <ul>
                <li v-for="item in typelist" :key="item.id">
                    <router-link :to="{ path: '/product/product/index', query: { 'typeid': item.id } }">
                        <img v-lazy="item.avatar_cdn">
                        <p>{{ item.name }}</p>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="contitbox">
            <p>新品</p>
        </div>
        <div class="clear"></div>
        <ul class="proul">
            <li v-for="item in homeInfo.newProData" :key="item.id">
                <div class="con">
                    <router-link :to="{ path: '/product/product/info', query: { 'proid': item.id } }">
                        <img v-lazy="item.avatars_cdn[0]">
                        <p><span>￥</span>{{ item.price }}</p>
                    </router-link>
                </div>
            </li>
        </ul>
        <div class="clear"></div>
        <div class="contitbox">
            <p>热销</p>
        </div>
        <div class="clear"></div>
        <ul class="proul_2">
            <li v-for="item in homeInfo.hotData" :key="item.id">
                <div class="con">
                    <router-link :to="{ path: '/product/product/info', query: { 'proid': item.id } }">
                        <img v-lazy="item.avatars_cdn[0]">
                        <p><span>￥</span>{{ item.price }}</p>
                    </router-link>
                </div>
            </li>
        </ul>
        <div class="clear"></div>
        <div class="h54"></div>
        <div class="clear"></div>
    </div>
    <Tab />
</template>

<script setup>
import Tab from '@/components/common/Tab.vue'
import { ref } from 'vue'
import apiList from '@/api'
import { useHomeStore } from '@/store/home.js'
import { storeToRefs } from 'pinia'
import {useRouter} from 'vue-router'

const router = useRouter()
const homeStore = useHomeStore()
let { homeInfo, typelist } = storeToRefs(homeStore)
let isLoading = ref(false)

//判断本地是否有home数据，没有就发送请求
if (Object.keys(homeInfo.value).length == 0) {
    getHomeData()
} else {
    isLoading.value = true
}
// console.log(homeInfo.value);

async function getHomeData() {
    let res = await apiList.getType()
    homeStore.$patch((state) => {
        state.homeInfo = res.data
        state.typelist = res.data.typeData.slice(0, 8)//取前8个进行展示
    })
    isLoading.value = true
}
</script>

<style scoped>
.loading {
    display: flex;
    justify-content: center;
}
</style>
